<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar :leftText="name" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="recommend_box">
      <view
        class="goods"
        @click="detailPage(index, item.goods_id)"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <div class="img">
          <image :src="item.img" mode="aspectFit"></image>
        </div>
        <div class="goods-content">
           <text class="name">{{ item.name }}</text>
          <view class="tags" v-if="item.datum.length > 0">
            <view class="tag" v-for="(y, index) in item.datum" :key="index">{{
              y.title
            }}</view>
           
          </view>
          <view class="detail" v-else>
            <text>{{ item.describe || "" }}</text>
          </view>
          <div class="price">
            <text v-show="canshowprice" class="unit"
              >¥<text class="prices"
                >{{ item.showPrice
                }}<text v-if="item.spu.length == 1" style="font-size: 20rpx">
                  /{{ item.spu[0].unit }}</text
                ></text
              ></text
            >
            <image
              @click.stop="showCart(index)"
              class="icon shop"
              src="/static/image/addcart.svg"
              mode=""
            >
            </image>
          </div>
        </div>
      </view>
      <view class="nodata" v-if="dataList.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>空空如也~</view>
      </view>
    </view>
    <my-addcart ref="minicart" :canshowprice="canshowprice"></my-addcart>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  data() {
    return {
      loginVolid: null, //是否强制登录
      logo: "",
      showLogo: 0,
      nodataImg: getApp().globalData.nodataImg,
      dataList: [],
      show: false,
      id: null,
      name: null,
      page: 1,
      count: 0,
    };
  },
  mixins: [MixinShowprice],
  onLoad(options) {
    this.loginVolid = !Boolean(
      uni.getStorageSync("loginVolid").is_login_category
    );
    this.id = options.id;
    this.name = options.name;
    // #ifdef MP-WEIXIN
    uni.setNavigationBarTitle({
      title: options.name,
    });
    // #endif
    this.getData();
  },
  methods: {
    getData() {
      let params = {
        page: this.page,
        size: 20,
        id: this.id,
      };
      $https(
        "GET",
        "getGoodsProject",
        params,
        (res) => {
          if (res.data.errcode == 0) {
            if (this.page == 1) {
              this.dataList = this.changePrice(res.data.data.list);
            } else {
              let list = [
                ...this.dataList,
                ...this.changePrice(res.data.data.list),
              ];
              this.dataList = list;
            }
            this.count = res.data.data.count;
            //是否显示logo
            uni.setStorageSync("showLogo", res.data.data.auto_watermark);
            uni.setStorageSync("logo", res.data.data.site_logo);
            this.showLogo = res.data.data.auto_watermark;
            this.logo = res.data.data.site_logo;
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        },
        this.loginVolid
      );
    },
    detailPage(index, id) {
      uni.navigateTo({
        url: `../../subindex/index/shopdetail?id=${id}`,
      });
    },
    addToCart(goodsId, spuId, num, index) {
      var options = {
        goods_id: goodsId,
        spu_id: spuId,
        num,
      };
      $https("POSTN", "changeCart", options, (res) => {
        if (res.data.errcode == 0) {
          this.dataList[index].willBuyNum = Number(num);
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    changeDate(data) {
      this.date.start = data.startDate;
      this.date.end = data.endDate;
      let startTime = (new Date(data.startDate) / 1000).toFixed(0);
      let endTime = (new Date(data.endDate) / 1000).toFixed(0);
      this.date.startTime = startTime;
      this.date.endTime = endTime;
      this.getData(startTime, endTime);
    },
    //处理价格规格sku
    changePrice(data) {
      var array = JSON.parse(JSON.stringify(data));
      for (let i in array) {
        //算出价格范围
        if (array[i].spu.length > 1) {
          var min, max;
          min = array[i].spu[0].market_price;
          if (array[i].spu[1].market_price < min) {
            max = Number(array[i].spu[0].market_price);
            min = Number(array[i].spu[1].market_price);
          } else {
            max = Number(array[i].spu[1].market_price);
            min = Number(array[i].spu[0].market_price);
          }
          for (let y in array[i].spu) {
            if (Number(array[i].spu[y].market_price) < min) {
              min = Number(array[i].spu[y].market_price);
            } else if (Number(array[i].spu[y].market_price) > max) {
              max = Number(array[i].spu[y].market_price);
            }
          }
          array[i].showPrice = `${min.toFixed(2)}~${max.toFixed(2)}`;
        } else if (array[i].spu.length == 1) {
          //只有一个规格时显示起订量、库存
          array[i].showPrice = array[i].spu[0].market_price;
          array[i].minimum = array[i].spu[0].minimum;
          array[i].designated_inventory = array[i].spu[0].designated_inventory;
          array[i].inventory_left = array[i].spu[0].inventory_left;
        }
        array[i].willBuyNum = array[i].num_cart_count;
      }
      return array;
    },
    //显示小购物车
    showCart(index) {
      var data = this.dataList[index];
      this.$refs.minicart.open(data);
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    if (this.count > this.page * 20) {
      this.page += 1;
      this.getData();
    }
  },
};
</script>

<style lang="scss">
/deep/.u-drawer {
  overflow: unset !important;
}

.page {
  .search_box {
    box-sizing: border-box;
    padding: 0 50rpx;
    background: #f0f1f3;
    border-radius: 40rpx;
    color: #b7b8ba;
    height: 80rpx;
    width: 684rpx;
    margin: 20rpx auto 0;
    display: flex;
    align-items: center;

    .search_input {
      margin-left: 18rpx;
      color: #999;
    }
  }

  .goods_box {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    .goods {
      float: left;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: 10rpx;
      width: 326rpx;
      height: 268rpx;
      box-sizing: border-box;
      padding: 12rpx 0;
      margin-bottom: 30rpx;

      .img {
        height: 92rpx;
      }

      .name {
        font-size: 32rpx;
        color: #191919;
        margin: 14rpx 0 10rpx;
        font-weight: bold;
      }

      .tags {
        display: flex;

        .tag {
          padding: 0 12rpx;
          // transform: scale(.8);
          background: #e84b4b;
          color: #fff;
          border-radius: 6rpx;
          font-size: 20rpx;
          margin-left: 12rpx;
        }
      }

      .detail {
        height: 36rpx;
        font-size: 24rpx;
        padding: 0 10rpx;
        box-sizing: border-box;
        text-align: center;
        color: #ccc;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .unit {
        margin: 5rpx 0;
        color: #e84b4b;
        font-size: 20rpx;
        width: 160rpx;

        .price {
          font-size: 28rpx;
        }
      }

      .icon {
        position: absolute;
        z-index: 1;
        top: 12rpx;

        &.logo {
          width: 80rpx;
          left: 14rpx;
        }

        &.shop {
          width: 38rpx;
          height: 38rpx;
          right: 14rpx;
        }
      }
    }
  }

  /deep/.u-calendar {
    background: #fff;

    .u-calendar__header__text {
      padding-top: 32rpx;
      margin-top: 0;
    }
  }
}

.recommend_box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10rpx 10rpx;

  .goods {
    float: left;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10rpx;
    width: 360rpx;
    box-sizing: border-box;
    margin-bottom: 10rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    overflow: hidden;

    .img {
      width: 100%;
      display: flex;
      justify-content: center;
      image {
        width: 360rpx;
        height: 360rpx;
        min-height: 360rpx;
      }
    }
    &-content {
      display: flex;
      flex-direction: column;
      padding: 10rpx 20rpx;
      .name {
        font-size: 26rpx;
        color: #333333;
      }
      .tags {
        // position: absolute;
        // top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 24rpx;
        color: white;

        .tag {
          margin-right: 10rpx;
          border: 1rpx solid #f5dcd7;
          padding: 0 6rpx;
          border-radius: 6rpx;
          background: red;
        }
      }
      .detail {
        font-size: 24rpx;
        color: #999999;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-content: center;
        height: 38rpx;

        .unit {
          font-size: 24rpx;
          color: red;
          line-height: 38rpx;
          width: 160rpx;
          display: flex !important;
        }

        .icon {
          position: absolute;
          z-index: 1;
          bottom: 12rpx;

          &.logo {
            width: 80rpx;
            left: 14rpx;
          }

          &.shop {
            width: 50rpx;
            height: 50rpx;
            right: 14rpx;
          }
        }
      }
    }
  }

  .noGoods {
    width: 320rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    color: #cccccc;

    image {
      width: 100%;
      height: 240rpx;
    }
  }
}
</style>
